<template>
  <div class="right-toolbar">
    <!-- opera-bar begin -->
    <div class="opera-bar">
      <slot name="operaBar" />
    </div>
    <!-- opera-bar end -->
    <!-- top-right-btn begin -->
    <div class="top-right-btn">
      <el-row>
        <!-- table-tip begin -->
        <slot name="tableTip" />
        <!-- table-tip end -->
        <el-tooltip v-if="needSearch" class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
          <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
        </el-tooltip>
        <el-tooltip v-if="tableName" class="item" effect="dark" content="显隐列" placement="top">
          <el-button size="mini" circle icon="el-icon-menu" @click="open = true" />
        </el-tooltip>
      </el-row>
      <el-drawer
        title="选择表格显示字段"
        class="menu-drawer"
        :size="280"
        append-to-body
        :visible.sync="open">
        <el-checkbox-group v-model="value" class="menu-show-check">
          <draggable v-model="tableColumnList" class="check-list" :options="checkOptions">
            <el-checkbox v-for="(item, index) in tableColumnList" :key="index" class="check-item" :label="item.id">{{ item.columnTitle }}</el-checkbox>
          </draggable>
        </el-checkbox-group>
        <div class="drawer-footer">
          <el-button size="small" @click="open = false">取消</el-button>
          <el-button :loading="drawerLoading" type="primary" size="small" @click="subColumn()">确定</el-button>
        </div>
      </el-drawer>
    </div>
    <!-- top-right-btn end -->
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import * as API_Table from '@/api/system/table';

export default {
  name: 'PageOpera',
  components: { draggable },
  props: {
    needSearch: {
      type: Boolean,
      default: true
    },
    showSearch: {
      type: Boolean,
      default: true
    },
    tableName: {
      type: String,
      default: undefined
    }
  },
  data () {
    return {
      // 显隐数据
      value: [],
      // 弹出层标题
      title: '显示/隐藏',
      // 是否显示弹出层
      open: false,
      tableColumnList: [],
      checkOptions: {
        animation: 150,
        group: { name: 'checkGroup', put: true },
        sort: true,
        handle: '.check-item'
      },
      drawerLoading: false
    };
  },
  created () {
    if (this.tableName) { // 获取列
      this.getTableColumn(this.tableName);
    };
  },
  methods: {
    /**
      * @date 2025/07/22
      * @author wolfMan
      * @description {获取表格列}
    */
    getTableColumn (_name) {
      let _params = {
        tableName: _name
      };
      API_Table.getCustomColumns(_params).then(response => {
        let _useData = response || [];
        let _tableColumn = _useData.filter(item => item.defaultDisplay === 1);
        this.$emit('update:tableColumn', _tableColumn);
        this.tableColumnList = this.MixinClone(_useData);
        this.$nextTick(() => { // 遍历复选框选中的值
          let _value = [];
          _tableColumn.forEach(item => {
            _value.push(item.id);
          });
          this.value = _value;
        });
      });
    },
    /**
      * @date 2025/07/22
      * @author wolfMan
      * @description {搜索}
    */
    toggleSearch () {
      this.$emit('update:showSearch', !this.showSearch);
    },
    /**
      * @date 2025/07/22
      * @author wolfMan
      * @description {改变页面表格宽度}
    */
    changeColumnWidth (_column) {
      const { label, width } = _column || {};
      let _tableColumnList = this.MixinClone(this.tableColumnList);
      for (const item of _tableColumnList) {
        if (item.columnTitle === label) {
          item.columnWidth = width;
          // 表头修改提交
          this.subColumn(_tableColumnList);
          break;
        };
      };
    },
    /**
      * @date 2025/07/22
      * @author wolfMan
      * @description {刷新}
    */
    refresh () {
      this.$emit('queryTable');
    },
    /**
      * @date 2025/07/22
      * @author wolfMan
      * @description {表头显隐勾选提交}
    */
    subColumn (_tableColumnList) {
      this.drawerLoading = true;
      let _sortNum = 0;
      let _tableColumn = _tableColumnList ? _tableColumnList : this.MixinClone(this.tableColumnList);
      _tableColumn = _tableColumn.map(item => {
        item.defaultDisplay = this.value.includes(item.id) ? 1 : 0;
        item.sortOrder = _sortNum;
        _sortNum++;
        return item;
      });
      API_Table.editCustomColumns(_tableColumn).then(response => {
        // 更新表格显示列
        let _needTableColumn = _tableColumn.filter(item => item.defaultDisplay === 1);
        this.$emit('update:tableColumn', _needTableColumn);
        this.open = false;
        this.$nextTick(() => {
          this.tableColumnList = response.data || [];
        });
      }).always(() => {
        this.drawerLoading = false;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.right-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  .opera-bar {
    display: flex;
    align-items: center;
    .el-button--mini {
      padding: 7px 10px;
    }
    > a,
    > .el-button,
    > .el-dropdown,
    > .excel-box {
      float: left;
      & + a,
      & + .el-button,
      & + .el-dropdown,
      & + .excel-box {
        margin-left: 5px;
      }
    }
  }
  .tool-bar-tip {
    flex: 1;
    min-width: 0;
    padding-left: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #ff0000;
    font-size: 12px;
  }
}
::v-deep .el-transfer__button {
  border-radius: 50%;
  padding: 12px;
  display: block;
  margin-left: 0px;
}
::v-deep .el-transfer__button:first-child {
  margin-bottom: 10px;
}
.menu-drawer {
  ::v-deep .el-drawer__header {
    padding: 0 15px;
    margin-bottom: 0;
    line-height: 50px;
    border-bottom: solid 1px #dedede;
    color: #222;
  }
  ::v-deep .menu-show-check {
    padding: 10px 0;
    height: calc(100vh - 102px);
    box-sizing: border-box;
    overflow-y: auto;
    .el-checkbox {
      display: block;
      padding: 8px 15px;
      margin-right: 0;
      cursor: move;
      color: #606266;
      font-weight: 400;
      .el-checkbox__label {
        max-width: 240px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: middle;
      }
      &:hover {
        background: #f5f7fa;
        color: #1890ff;
      }
    }
  }
  .drawer-footer {
    padding: 10px 0;
    text-align: center;
    box-shadow: 0 1px 6px rgba(222, 222, 222, .8);
    .el-button {
      min-width: 80px;
    }
    .el-button + .el-button {
      margin-left: 10px;
    }
  }
}
</style>